<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
    <title>购物车</title>

</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->

<div class="container">
    <div class="row justify-content-center mt-3">
        <div class="col-9">
            <!-- 购物车表头数据 -->
            <div class="row text-center cart_header">
                <div class="col-1">
                    <input type="checkbox" id="checkAll" onchange="addAll()">
                </div>
                <div class="col-4">商品名称</div>
                <div class="col-2 d-none d-lg-block">价格</div>
                <div class="col-lg-2 col-sm-4">数量</div>
                <div class="col-2">小计</div>
                <div class="col-1">操作</div>
            </div>
            <!-- /购物车表头数据 -->

            <!-- 购物车的详情数据 -->
            <div id="cart-item">
                <div class="row text-center cart-item">
                    <div class="col-1"><input type="checkbox" ></div>
                    <div class="col-4">商品名称1</div>
                    <div class="col-2 d-md-none d-lg-block">
                        <div class="h-100 d-flex align-items-center" style="justify-content: center;">$13</div>
                    </div>
                    <div class="col-lg-2 col-sm-4">
                        <div class="input-group input-group-sm">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon1">-</button>
                            <input type="text" class="form-control" value="1" placeholder=""
                                   aria-label="Example text with button addon" aria-describedby="button-addon1">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">+</button>
                        </div>
                    </div>
                    <div class="col-2">$12</div>
                    <div class="col-1">
                        <a href="#">删除</a>
                    </div>
                </div>
                <!-- /购物车的详情数据 -->
            </div>

            <!-- 购物车底部 -->
            <div class="row justify-content-end text-center cart-footer">
                <div class="col-7 d-flex justify-content-around" style="align-items: center">
                    <a href="javascript:void(0);" onclick="delSelected()">删除所选</a>
                    <a href="javascript:void(0);" onclick="delAll()">清空购物车</a>
                    <a type="button" class="btn btn-outline-success btn-sm" href="order.html">提交订单</a>
                    <span>商品总金额$<span id="cart-acount">12356</span></span>
                </div>
            </div>
            <!-- /购物车底部 -->
        </div>
    </div>
</div>

<script>
    //发送异步请求
    fetch("load.cart")
        .then(response=>response.json())
        .then(data=>{
            if (data.flag){
               let cartdata=data.data;
                updateCartItem(cartdata);
            }
        });
    //准备数据

    let cartItemDiv = document.querySelector("#cart-item");
    let cartAccount = document.querySelector("#cart-acount");

    //更新购物车数据
    let updateCartItem = function (cartdata) {
        products=cartdata.items;
        let itemStr = '';
        //let account = cartdata.account;

        products.forEach((e, index) => {
            itemStr +=
                ` <div class="row text-center cart-item">
                        <div class="col-1"><input type="checkbox" name="checkButton" value='${e.product.id}'></div>
                        <div class="col-4">${e.product.name}</div>
                        <div class="col-2 d-none d-lg-block">
                            <div class="h-100 d-flex align-items-center" style="justify-content: center;">${e.product.shopPrice}</div>
                        </div>
                        <div class="col-lg-2 col-sm-4">
                            <div class="input-group input-group-sm">
                                <button class="btn btn-outline-secondary" type="button" id="button-sub" onclick='Sub(${e.product.id},${e.qty})'>-</button>
                                    <input type="text" onblur="Change(${e.product.id})" id="changeValue" class="form-control" style="text-align:center;" value="${e.qty}">
                                <button class="btn btn-outline-secondary" type="button" id="button-add" onclick='Add(${e.product.id},${e.qty})'>+</button>
                            </div>
                        </div>
                        <div class="col-2">${e.product.shopPrice * e.qty}</div>
                        <div class="col-1">
                            <a href="javascript:void(0);" onclick='deleteById(${e.product.id})'>删除</a>
                        </div>
                    </div>
                    <!-- /购物车的详情数据 -->`;
        });
        cartItemDiv.innerHTML = itemStr;
        cartAccount.innerHTML= cartdata.account;
    }
    /**
     * 判断checkbox是否被选中
     */
    let checkButton=document.getElementsByTagName('input');
    let checkAll=document.getElementById("checkAll");/*选中购物车所有的订单*/
    console.log(checkAll.checked);
    /**
     *选中所有checkbox
     */
    let addAll=function (){
        if (checkAll.checked){
            for (let i = 0; i < checkButton.length; i++) {
                checkButton[i].checked=true;
            }
        }else {
            location.href="cart.html";
        }
    }
    /**
     * 为删除所选绑定事件
     */
    let delSelected=function (){
        if (window.confirm("确认删除所选?")){
                for (let i = 0; i < checkButton.length; i++) {
                    if (checkButton[i].checked){
                        //console.log(checkButton[i].value);成了
                        fetch(`delete.cart?id=${checkButton[i].value}`).then(response=>response.json()).then(data=>{
                            if(data.flag){
                                location.href="cart.html";
                            }
                        });
                    }
                }
        }
    }
    /**
     * 删除购物车中所有的订单
     */
    let delAll=function (){
        if (window.confirm("确认清空购物车?")){
            for (let i = 0; i < checkButton.length; i++) {
                fetch(`delete.cart?id=${checkButton[i].value}`).then(response=>response.json()).then(data=>{
                    if(data.flag){
                        location.href="cart.html";
                    }
                });
            }
        }
    }
    /**
     * 根据id删除购物车中的订单
     */
    let deleteById=function(productId){
        if(window.confirm("确认删除吗？")){
            fetch(`delete.cart?id=${productId}`).then(response=>response.json()).then(data=>{
                if(data.flag){
                    alert(data.message);
                    location.href="cart.html";
                }
            });
        }
    }
    /**
     * 在订单中减少商品的数量
     * @param productId 自己的id
     * @param qty   数量
     */
    let Sub=function (productId,qty){
        qty--;
        fetch(`upData.cart?id=${productId}&qty=${qty}`).then(response=>response.json()).then(data=>{
            if(data.flag){
                //alert(data.message);
                location.href="cart.html";
            }
        });
    }
    /**
     * 在订单中增加商品的数量
     * @param productId 自己的id
     * @param qty   数量
     */
    let Add=function (productId,qty){
        qty++;
        fetch(`upData.cart?id=${productId}&qty=${qty}`).then(response=>response.json()).then(data=>{
            if(data.flag){
                //alert(data.message);
                location.href="cart.html";
            }
        });
    }
    /**
     * 订单在通过更改文本修改商品数量
     * @param productId
     * @param qty
     */
    let Change=function (productId){
        let qty=document.getElementById("changeValue").value;
        fetch(`upData.cart?id=${productId}&qty=${qty}`).then(response=>response.json()).then(data=>{
            if(data.flag){
                //alert(data.message);
                location.href="cart.html";
            }
        });
    }
    /*//减法函数
    let sub = function (id, qty) {
        cartdata.forEach((e) => {
            if (e.id == id) {
                if (e.qty > 1) {
                    e.qty--;
                }
            }
            updateCartItem();
        })
    }
    //加法函数
    let add = function (id, qty) {
        cartdata.forEach((e) => {
            if (e.id == id) {
                e.qty++;
            }
        })
        updateCartItem();
    }

    //根据id删除
    let deleteById = function (id) {
        //添加删除处理机制
        let flag = window.confirm("真的要删除吗？");
        //根据id删除数据
        if (flag == true) {
            //1.根据id值获得该商品信息在cartdata中所在的下标
            let index = cartdata.findIndex(e => e.id == id);
            //2.将下标为index的数据从数组中删除
            cartdata.splice(index, 1);
            updateCartItem();
        }
    }
    let removeById = function (id) {
        let index = cartdata.findIndex(e => e.id == id);
        cartdata.splice(index, 1);
        updateCartItem();
    }
    //根据所选删除记录
    let delSelected = function () {
        //获得所有用户选中的checkbox  <input type="checkbox" data-id='1'>
        let checkboxs = document.querySelectorAll("#cart-item input:checked");
        checkboxs.forEach(e => {
            let checkboxs_id = e.getAttribute('data-id');
            removeById(checkboxs_id);
        })
    }
    //删除购物车所有订单
    let delAll = function () {

    }*/
</script>


</body>

</html>